<template>
  <div class="main">
    <div class="header">
      <div>
        <i class="iconfont icon-back"></i>
      </div>
      <div>
        <h2>注册</h2>
      </div>
      <div></div>
    </div>
    <div class="content">
      <img class="bg" src="../image/wogl45cyoya4zvcibnqy71wrfptuyz.png" alt="背景">
      <div class="form">
        <h3>下午好，欢迎注册！</h3>
        <div class="username">
          <i class="iconfont icon-account"></i>
          <input type="text" placeholder="会员名">
        </div>
        <div class="password">
          <i class="iconfont icon-password"></i>
          <input type="password" placeholder="密码">
        </div>
        <div class="verification">
          <i class="iconfont icon-browse"></i>
          <input type="text" placeholder="请输入验证码">
          <img src="../image/verification.jpg" alt="验证码">
        </div>
        <div class="service">
          <div class="left">
            <input type="checkbox">
            <p>同意诺蔓姿协议</p>
          </div>
          <div class="right">
            <a href="#">换一张</a>
            <p>看不清楚？</p>
          </div>
        </div>
        <div class="submit">注册</div>
        <p class="login">已有账号？
          <a href="#">请登录</a>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "registerPage"
};
</script>

<style scoped lang="less">
.main {
  color: #ffffff;
}
.header {
  display: flex;
  height: 80px;
  background-color: #6a7531;
  div {
    width: 33.33%;
    height: 80px;
    line-height: 80px;
    font-size: 36px;
    h2 {
      text-align: center;
    }
    i {
      font-size: 52px;
    }
  }
  div:first-child {
    text-align: left;
    i {
      margin-left: 15px;
    }
  }
}
.content {
  .bg {
    position: absolute;
    top: 80px;
    z-index: -1;
    width: 100%;
    background-color: #6a7531;
  }
  .form {
    width: 630px;
    height: 579px;
    background-color: #e4edf2;
    margin: 215px auto 0 auto;
    border-radius: 7px;
    color: #999999;
    h3 {
      font-size: 24px;
      color: #c0bbbb;
      text-align: center;
      padding-top: 34px;
      margin-bottom: 28px;
    }
    .username,
    .password,
    .verification {
      width: 609px;
      height: 60px;
      line-height: 60px;
      background-color: #ffffff;
      border: #dfdfdf 1px solid; /*no*/
      border-radius: 7px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 20px;
      i {
        float: left;
        font-size: 36px;
        padding-left: 80px;
        padding-right: 56px;
        border-right: #dfdfdf 1px solid; /*no*/
      }
      input {
        float: left;
        width: 315px;
        height: 34px;
        line-height: 34px;
        padding: 0;
        border: none;
        outline: none;
        font-size: 22px;
        margin-top: 13px;
        margin-bottom: 13px;
        padding-left: 50px;
        box-sizing: border-box;
      }
      img {
        float: right;
        width: 114px;
        height: 60px;
      }
    }
    .service {
      display: flex;
      padding: 0 18px 0 80px;
      margin-top: 30px;
      div {
        width: 50%;
        color: #333333;
        font-size: 30px;
      }
      .left {
        input,
        p {
          float: left;
          line-height: 30px;
        }
        input {
          width: 30px;
          height: 30px;
          outline: none;
          margin-right: 7px;
        }
      }
      .right {
        a,
        p {
          float: right;
          line-height: 30px;
        }
        a {
          color: #fb0303;
        }
      }
    }
    .submit {
      width: 380px;
      height: 60px;
      background-color: #fb0303;
      font-size: 36px;
      line-height: 60px;
      text-align: center;
      color: #ffffff;
      margin: 37px auto;
      border-radius: 30px;
    }
    .login {
      float: right;
      font-size: 24px;
      a {
        color: #fb0303;
        margin-right: 18px;
      }
    }
  }
}
</style>